<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="/static/js/jquery-1.12.2.js"></script>

    <title>猫眼电影</title>
    <link rel="icon" href="/static/images/title-lolg.png">

</head>

<body>
<div id="login_wrap">
    <div class="login ">
        <div id="status">
            <i style="top: 0">登录</i>
        </div>
        <span>
            	<form action="/movie/users/login" method="post">
                    <p style="color: red;" th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}">提示信息</p>
                        <p class="form"><input type="text" id="user" name="username" placeholder="用户名"></p>
                        <p class="form"><input type="password" id="passwd" name="password" placeholder="密码"></p>
                    <p><input type="checkbox" value="true" name="remember-me" style="height: 20px;width: 20px">记住我</p>
                        <input type="submit" value="登录" class="btn" style="margin-right: 20px;">
                        <input type="button" value="立即注册" class="btn" id="btn" onclick="tosign()">
                    </form>
                    <a href="/static/#">忘记密码?</a>
            </span>
    </div>
    <div class="sign disnone">
        <div id="status">
            <i style="top: 0">注册</i>
        </div>
        <span>
            	<form>
                        <p id="msg" style="color:red;"></p>
                        <p class="form"><input type="text" id="username" name="username" placeholder="用户名 6-15位数"></p>
                        <p class="form"><input type="password" id="spasswd" placeholder="密码 6-15位数"></p>
                        <p class="form"><input type="password" id="password" name="password" placeholder="再次输入密码"></p>
                        <input type="button" value="立即登录" class="btn" style="margin-right: 20px;" onclick="tologin()">
                        <input type="button" value="注册" class="btn" id="btn" onclick="register()">
                </form>
            </span>
    </div>
    <div class="login-img">
        <video src="/static/media/login-video.mp4" autoplay controls></video>
        <div class="img">
        </div>
    </div>
</div>
<script src="/static/js/login.js"></script>
<script src="/static/js/mock-min.js"></script>
<script src="/static/js/server.js"></script>
<script src="/static/js/ajax.js"></script>

<script>
    //判断账号是否存在
    $("#username").blur(function () {
        $.ajax({
            url: "/movie/users/judgeUsername",
            data: {
                username: $("#username").val()
            },
            success: function (response) {
                //失败
                if (response.code != 0) {
                    $("#msg").html(response.msg);
                } else {
                    $("#msg").html("");
                }
            }
        })
    })

    //注册
    function register() {
        if ($("#msg").val() != "") {
            alert($("#msg").val());
            return
        }
        if ($("#spasswd").val() != $("#password").val()) {
            alert("两次输入的密码不一致");
            return
        }

        if ($("#spasswd").val() == "") {
            alert("密码不能为空")
            return
        }

        if ($("#username").val().length < 5 || $("#username").val().length > 15) {
            alert("用户名必须大于6位小于15")
            return
        }

        if ($("#password").val().length < 5 || $("#password").val().length > 15) {
            alert("密码必须大于6位小于15")
            return
        }

        if ($("#password"))

            $.ajax({
                url: "/movie/user/register",
                type: "post",
                data: {
                    username: $("#username").val(),
                    password: $("#password").val()
                },
                success: function (data) {
                    if (data.code == 0) {
                        location.href = "/login.html"
                    } else {
                        $("#msg").html("服务器错误 注册失败");
                    }
                }
            })

    }


</script>
</body>


</html>